<template>
  <div class="label-type">
    <div class="history-task-container">
      <div class="search-container">
        <div class="search-input" v-role="'A040201002'">
          <el-input
            v-model="model.name"
            placeholder="组件名称"
            :prefix-icon="Search"
            style="width: 272px; margin-right: 24px"
            clearable
          />
          <el-button @click="reset">重置</el-button>
          <el-button @click="search" type="primary">查询</el-button>
        </div>
      </div>
      <div class="content">
        <div class="title-info">
          <div class="title">标注组件列表</div>
          <el-button type="primary" :icon="Plus" @click="create" v-role="'A040201003'">新建</el-button>
        </div>
          <el-table
            v-role="'A040201001'"
            :data="tableList"
            style="width: 100%"
            stripe
            class="define-el-table"
          >
            <el-table-column type="index" label="序号" width="240" />
            <el-table-column label="编码" >
              <template #default="scope">
                <span>{{ scope.row.code }}</span>
              </template>
            </el-table-column>
            
            <el-table-column label="名称" >
              <template #default="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>

            <el-table-column label="类型" >
              <template #default="scope">
                <span>{{ scope.row.type }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              width="320">
              <template #default="scope">
                <el-button @click="view" type="text">查看</el-button>
                <el-button @click="edit" type="text" v-role="'A040201004'">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="el-pagination-container"
            style="display: flex; justify-content: flex-end"
          >
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100, 500]"
              layout="prev, pager, next, sizes"
              :total="total"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
      </div>
    </div>


    
    
    <!-- 新建标注组件 -->
    <el-dialog
      v-model="createVisible"
      title="新建标注组件"
      width="1000px"
      class="define-el-dialog component-el-dialog"
    >

      
      <div class="content">
        <el-form :model="creatModel">
          <el-form-item label="选择组件类型" prop="组件类型" class="el-form-item-wrap">
            <div class="component-type-container">
              <div
                v-for="(item,index) in componentTypeList"
                :key="item.name"
                @click="selectComponentType(item,index)"
                :class="`item ${item.isActive ? 'active' : ''}`"
              >
                <i :class="`iconfont icon-${item.iconName}`"></i>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </el-form-item>
          
          <!-- 1、文本框 -->
          <el-form-item v-if="componentTypeText == '文本框'" label="文本框标题" class="el-form-item-wrap" >
            <el-input v-model="creatModel.文本框标题" placeholder="请输入" />
          </el-form-item>

          <!-- 2、下拉菜单 -->
          <div v-if="componentTypeText == '下拉菜单'">
            <el-form-item label="下拉菜单标题" class="el-form-item-wrap">
              <el-input v-model="creatModel.下拉菜单标题" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="下拉选项" class="el-form-item-wrap">
              <el-row
                v-for="(item,index) in 下拉选项Options"
                :key="index"
                class="el-row-style"
              >
                <el-col :span="9">
                  <el-form-item :label="'选项'+(index+1)" label-width="72px">
                    <el-input v-model="item.name" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="编码" label-width="72px">
                    <el-input v-model="item.value" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label=" " label-width="">
                    <el-checkbox v-model="item.isDefault" label="设为默认选项" @change="下拉菜单DefaultChange(item,index)" />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div class="icon-handle">
                    <div class="delete" v-show="(index > 0)" @click="下拉菜单del(index)" >
                      <el-icon><Delete/></el-icon>
                    </div>
                    <div class="plus" v-show="(index === 0 || index === 下拉选项Options.length - 1)" @click="下拉菜单plus(index)">
                      <el-icon><Plus/></el-icon>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </div>


          <!-- 3、单选框 -->
          <div v-if="componentTypeText == '单选框'">
            <el-form-item label="单选框标题" class="el-form-item-wrap">
              <el-input v-model="creatModel.单选框标题" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="单选选项" class="el-form-item-wrap">
              <el-row
                v-for="(item,index) in 单选框Options"
                :key="index"
                class="el-row-style"
              >
                <el-col :span="9">
                  <el-form-item :label="'选项'+(index+1)" label-width="72px">
                    <el-input v-model="item.name" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="编码" label-width="72px">
                    <el-input v-model="item.value" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label=" " label-width="">
                    <el-checkbox v-model="item.isDefault" label="设为默认选项" @change="单选框DefaultChange(item,index)" />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div class="icon-handle">
                    <div class="delete" v-show="(index > 0)" @click="单选框del(index)" >
                      <el-icon><Delete/></el-icon>
                    </div>
                    <div class="plus" v-show="(index === 0 || index === 单选框Options.length - 1)" @click="单选框plus(index)">
                      <el-icon><Plus/></el-icon>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </div>


          <!-- 4、复选组 -->
          <div v-if="componentTypeText == '复选组'">
            <el-form-item label="复选组标题" class="el-form-item-wrap">
              <el-input v-model="creatModel.复选组标题" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="复选选项" class="el-form-item-wrap">
              <el-row
                v-for="(item,index) in 复选组Options"
                :key="index"
                class="el-row-style"
              >
                <el-col :span="9">
                  <el-form-item :label="'选项'+(index+1)" label-width="72px">
                    <el-input v-model="item.name" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="编码" label-width="72px">
                    <el-input v-model="item.value" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  
                </el-col>
                <el-col :span="2">
                  <div class="icon-handle">
                    <div class="delete" v-show="(index > 0)" @click="复选组del(index)" >
                      <el-icon><Delete/></el-icon>
                    </div>
                    <div class="plus" v-show="(index === 0 || index === 复选组Options.length - 1)" @click="复选组plus(index)">
                      <el-icon><Plus/></el-icon>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </div>

          <!-- 5、二级下拉菜单 -->
          <div v-if="componentTypeText == '二级下拉菜单'" class="second-level-container">
            <el-form-item label="二级下拉菜单标题" class="el-form-item-wrap">
              <el-input v-model="creatModel.复选组标题" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="下拉选项" class="el-form-item-wrap">
              <div
                v-for="(item,index) in 二级下拉菜单Options"
                :key="index"
                style="width:100%"
                :class=" item.isOpen ? 'item-container isopen' : 'item-container' "
              >
                <div class="item">
                  <div class="icon-container" @click="toggleIsOpen(item, index)" >
                    <i :class=" item.isOpen ? 'iconfont icon-xiasanjiaoxing' : 'iconfont icon-shangsanjiaoxing'"></i>
                  </div>
                  <el-row
                    class="el-row-style"
                  >
                    <el-col :span="9">
                      <el-form-item :label="'选项'+(index+1)" label-width="58px">
                        <el-input v-model="item.name" placeholder="请输入" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="编码" label-width="72px">
                        <el-input v-model="item.value" placeholder="请输入" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      
                    </el-col>
                    <el-col :span="2">
                      <div class="icon-handle">
                        <div class="delete" v-show="(index > 0)" @click="二级下拉菜单del(index)" >
                          <el-icon><Delete/></el-icon>
                        </div>
                        <div class="plus" v-show="(index === 0 || index === 复选组Options.length - 1)" @click="二级下拉菜单plus(index)">
                          <el-icon><Plus/></el-icon>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>

                <div class="sub-item">
                  <el-row
                    class="el-row-sub"
                    v-for="(subItem,subIndex) in item.child"
                    :key="subIndex"
                  >
                    <el-col :span="10">
                      <el-form-item label="二级选项" label-width="72px">
                        <el-input v-model="subItem.name" placeholder="请输入" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="编码" label-width="72px">
                        <el-input v-model="subItem.value" placeholder="请输入" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <div class="icon-handle">
                        <div class="delete" v-show="(subIndex > 0)" @click="二级下拉菜单SubDel(index, subIndex)" >
                          <el-icon><Delete/></el-icon>
                        </div>
                        <div class="plus" v-show="(subIndex === 0 || subIndex === item.child.length - 1)" @click="二级下拉菜单SubPlus(index, subIndex)">
                          <el-icon><Plus/></el-icon>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                
                
              </div>
              
            </el-form-item>
          </div>

          




        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="colseVisible">取消</el-button>
          <el-button type="primary" @click="colseVisible">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>
//@ts-noCheck
import { ref, reactive, onMounted } from 'vue';
  // import SysNotice from '@/components/sys-notice/index.vue';
  import NavBar from '@/components/navbar/index.vue';
  import { useAppStore, useUserStore } from '@/store';
  import ill from '@/assets/images/ill.png';
  import { Warning, Plus, Search, Delete } from '@element-plus/icons-vue';
  import { formatDateTime } from '@/utils/date';
  import NewTaskList from '@/views/doctor/components/NewTaskList.vue';
  import { taskSeriesSearch, userTaskSearch } from '@/api/doctor/doctor';
  import {
    TaskSeriesSearchList,
    TaskSeriesSearchModel,
    UserTaskSearchList,
    UserTaskSearchModel,
  } from '@/api/doctor/doctor.d';
  import {
    lesionSearch,
    lesionMaxCode,
    configLesion,
  } from '@/api/configCenter/configCenter';
  import type { FormInstance, FormRules } from 'element-plus';
import { Message } from '@arco-design/web-vue';
  import {
    formComponentSearch 
  } from '@/api/projectDetail/projectDetail';

  const ComponentType = {
    text:           "text",
    select:         "select",
    child_select:   "child_select",
    radiobox:       "radiobox",
    checkbox:       "checkbox",
  };

  onMounted(()=>{
    setTableList();
  })



  /**
   * 所有任务 搜索
   */
   const taskStatusList = reactive([
    { name: '未发布', value: 0 },
    { name: '进行中', value: 1 },
    { name: '已完成', value: 2 },
    { name: '已终结', value: 3 },
  ]);
  const tableList = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const model = reactive({
    name: '',
    ids: [],
    page: currentPage.value,
    pageSize: pageSize.value,
  });

  const setTableList = async ()=> {
    const _model = {
      ...model,
      page: currentPage.value,
      pageSize: pageSize.value,
    };
    const res = await formComponentSearch(_model);
    tableList.value = res?.data?.list || [];
    total.value = res?.data?.total || 0;
  }

  const reset = ()=> {
    model.name = '';
  }
  const search = () => {
    currentPage.value = 1;
    setTableList();
  };
  /**
   * 分页
   */
  const handleSizeChange = (size) => {
    pageSize.value = size;
    setTableList();
  };
  const handleCurrentChange = (page) => {
    currentPage.value = page;
    setTableList();
  };


  /**
      新建标注类型
    */
    const componentTypeText = ref(null); 
    const createVisible = ref(false);
    const componentTypeList = ref([
        { name: "文本框", iconName: "wenbenkuang1", isActive: false },
        { name: "下拉菜单", iconName: "xialakuang", isActive: false },
        { name: "单选框", iconName: "danxuankuang2", isActive: false },
        { name: "复选组", iconName: "fuxuankuang", isActive: false },
        { name: "二级下拉菜单", iconName: "erjixialakuang", isActive: false },
      ])
    const selectComponentType = (item,index) => {
      componentTypeList.value.forEach(item=> item.isActive = false);
      componentTypeList.value[index].isActive = true;
      componentTypeText.value = item.name;
    } 
    const create = ()=> {
      createVisible.value = true;
    }
    const colseVisible = ()=> {
      createVisible.value = false;
    }
    const creatModel = ref({
      选择种类: 1,
      名称: "",
      编码: "",
    });
    const lesionsGroupList = ref([
      { name: "", 编码: ""}
    ]);
    const plus = (index)=> {
      lesionsGroupList.value.push(
        { name: "", 编码: ""}
      );
    }
    const del = (index)=> {
      lesionsGroupList.value.splice(index, 1)
    }


    /**
     * 2、下拉菜单
     */
    const 下拉选项Options = ref([
      { name: "", value: null, isDefault: false },
    ]);
    const 下拉菜单plus = ()=> {
      下拉选项Options.value.push(
        { name: "", value: null, isDefault: false },
      )
    };
    const 下拉菜单del = (index)=> {
      下拉选项Options.value.splice(index, 1)
    }
    const 下拉菜单DefaultChange = (item, index)=>{
      下拉选项Options.value.forEach(item=> item.isDefault = false);
      下拉选项Options.value[index].isDefault = true;
    }


    /**
     * 3、单选框
     */
     const 单选框Options = ref([
      { name: "", value: null, isDefault: false },
    ]);
    const 单选框plus = ()=> {
      单选框Options.value.push(
        { name: "", value: null, isDefault: false },
      )
    };
    const 单选框del = (index)=> {
      单选框Options.value.splice(index, 1)
    }
    const 单选框DefaultChange = (item, index)=>{
      单选框Options.value.forEach(item=> item.isDefault = false);
      单选框Options.value[index].isDefault = true;
    }

    /**
     * 4、复选组
     */
     const 复选组Options = ref([
      { name: "", value: null},
    ]);
    const 复选组plus = ()=> {
      复选组Options.value.push(
        { name: "", value: null },
      )
    };
    const 复选组del = (index)=> {
      复选组Options.value.splice(index, 1)
    }

    /**
     * 5、复选组
     */

    const 二级下拉菜单Options = ref([
      { name: "", value: null, isOpen: true, child: [{  name: "", value: null }]},
    ]);
    const toggleIsOpen = (item, index)=> {
      二级下拉菜单Options.value[index].isOpen = !item.isOpen;
    }
    const 二级下拉菜单plus = ()=> {
      二级下拉菜单Options.value.push(
        { name: "", value: null, isOpen: true, child: [{  name: "", value: null }]},
      )
    };
    const 二级下拉菜单SubPlus = (index, subIndex) => {
      二级下拉菜单Options.value[index].child.push(
        { name: "", value: null},
      )
    }
    const 二级下拉菜单del = (index)=> {
      二级下拉菜单Options.value.splice(index, 1)
    }

    const 二级下拉菜单SubDel = (index, subIndex) => {
      二级下拉菜单Options.value[index].child.splice(index, 1)
    }

    

</script>


<style lang="less">
.label-type{
  background-color: #f5f5f5;
  padding: 20px;
  .history-task-container {
      .text-info {
        font-size: 16px;
        color: #333;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 20px;
      }
      .search-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        background-color: #fff;
        padding: 20px;
        .buttons-container {
          background-color: #fff;
        }
      }
      .content{
        padding: 20px 57px 20px 20px;
        background-color: #fff;
        .title-info{
          display: flex;
          justify-content: space-between;
          .title{
            font-style: normal;
            font-weight: 700;
            font-size: 16px;
            color: #333333;
            margin-bottom: 20px;
          }
        }
        
        .el-table {
          margin-top: 10px;
        }
        .el-table thead tr th,
        .el-table tbody tr td {
          text-align: left;
        }
        .el-table thead tr th {
          background-color: #fff;
        }
        .el-table__body tr {
          cursor: pointer;
        }
      }
      
    }
}

.component-el-dialog{
  .content{
    min-height: 540px;
  }
}

.define-el-dialog{
  .content{
    padding: 20px 0;
   
        overflow-y: scroll;
    .el-form-item.el-form-item-wrap{
      display: block;
      >.el-form-item__content{
        // display: block;
      }
      >.el-form-item__label{
        margin-bottom: 20px;
      }
      .component-type-container{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .item{
          display: flex;
          justify-content: center;
          align-items: center;
          width: ~'calc(20% - 8px)';
          height: 64px;
          background: #FFFFFF;
          border: 1px solid #D9D9D9;
          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.06);
          border-radius: 4px;
          cursor: pointer;
          &.active{
            border: 2px solid #448E97;
          }
          .iconfont {
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
            border-radius: 4px;
            &.icon-wenbenkuang1{
              background: #FFF5EA;
              &::before{
                color: #E47E11;
              }
            }
            &.icon-xialakuang{
              background: #F4F9FF;
              &::before{
                color: #3080E9;
              }
            }
            &.icon-danxuankuang2{
              background: #ECF6EE;
              &::before{
                color: #448E97;
              }
            }
            &.icon-fuxuankuang{
              background: #F7F0FF;
              &::before{
                color: #835BB6;
              }
            }
            &.icon-erjixialakuang{
              background: #FFF1E9;
              &::before{
                color: #FF9153;
              }
            }
          }
        }
      }
      .el-form-item__label{
        // margin-bottom: 16px;
      }
    }
    .second-level-container{

      .item-container{
        // margin-bottom: 20px;
        .item{
          display: flex;
          justify-content: center;
          .icon-container{
            width: 48px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .iconfont {
              color: #448E97;
            }
          }
        }
        .sub-item{
          display: none;
          padding: 0 58px;
          .icon-handle{
            justify-content:start;
            padding-left: 15px;
          }
          .el-row-style{
            margin-bottom: 12px;
          }
        }
        &.isopen{
          .sub-item{
            display: block;
            margin-bottom: 30px;
          }
        }
        .el-row-sub{
          padding-left: 10px;
          .el-col{
            margin-bottom: 12px;
          }
          .icon-handle{
            display: flex;
            justify-content: start;
            align-items: center;
            &>div{
              width: 32px;
              height: 32px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            }
            .el-icon{
              color: #448E97;
              font-size: 16px;
            }
          }
        }
      }
      
      
    }
    
    .el-row-style{
      // padding: 0 24px;
      width: 100%;
      margin-bottom: 30px;
      .icon-handle{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        &>div{
          width: 32px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .el-icon{
          color: #448E97;
          font-size: 16px;
        }
      }
    }
  }      
}
</style>